<template>
  <div class="statistical-1">
    <div class="col">
      <div class="row">
        <div class="chart" id="chart1"></div>
      </div>
      <div class="row">
        <div class="chart" id="chart2"></div>
      </div>
      <div class="row">
        <div class="chart" id="chart3"></div>
      </div>
    </div>
    <div class="col full">
      <div class="row map">
        <div class="number-block">
          <NumberItem class="number-item" v-for="item in numberData" :key="item.id" :name="item.name" :number="item.number" :color="item.color" :unit="item.unit" :icon="item.icon"></NumberItem>
        </div>
      </div>
      <div class="row">
        <Table title="各县市人才总量及投入" :tableData="tableData"></Table>
      </div>
    </div>
    <div class="col">
      <div class="row">
        <div class="chart" id="chart4"></div>
      </div>
      <div class="row">
        <div class="chart" id="chart5"></div>
      </div>
      <div class="row">
        <div class="chart" id="chart6"></div>
      </div>
    </div>
  </div>
</template>

<script>
import NumberItem from "@/components/NumberItem/NumberItem.vue";
import {getArrByKey, getPie3D, getPie3D2, getSymbolData} from "@/utils/chart";
import Table from "@/components/Table/Table.vue";
import {
  getGenderPie,
  getHighEducationBar, getIndicatorsList,
  getIndicatorsNumberPie,
  getPoliticsPie, getTitlesLevelBar,
  getTotalCount, getUnitNatureBar
} from "@/api/statistical1";

export default {
  name: "Statistical1",
  components: {
    Table,
    NumberItem
  },
  data() {
    return {
      numberData: [
        {
          id: 1,
          unit: '万人',
          color: ['#5c6affb3', '#4a29d8b3'],
          name: '人才总量',
          icon: 'icon-rencaifuwu',
          number: 0
        },
        {
          id: 2,
          unit: '%',
          color: ['#30cbf7b3', '#1997e1b3'],
          name: '各类人才占人口比例',
          icon: 'icon-fenlei',
          number: 0
        },
        {
          id: 3,
          unit: '万元',
          color: ['#12f1b8b3', '#0db5e6b3'],
          name: '人才发展专项资金',
          icon: 'icon-zijin',
          number: 0
        },
        {
          id: 4,
          unit: '万元',
          color: ['#f7c759b3', '#fb838fb3'],
          name: '市本级人才发展专项资金',
          icon: 'icon-zijin',
          number: 0
        },
      ],
      tableData: {
        head: [
          {name: '序号', width: 20},
          {name: '县市', width: 14},
          {name: '人才总量', width: 22},
          {name: '各类人才占人口比例', width: 22},
          {name: '人才发展专项资金', width: 22},
        ],
        data: [
        ]
      },
      charts: {
        chart1: null,
        chart2: null,
        chart3: null,
        chart4: null,
        chart5: null,
        chart6: null,
      },

      //左下角立体饼图
      pieData: [],
      //右上角立体饼图
      pieData2: [],
    }
  },
  methods: {
    totalCount(){
      getTotalCount().then(data=>{
        this.numberData[0].number=data.total.value
        this.numberData[1].number=data.talent_proportion.value
        this.numberData[2].number=data.money.value
        this.numberData[3].number=data.city_money.value
      })
    },
    getIndicators(){
      getIndicatorsList().then(data=>{
        this.tableData.data=data;
      })
    },
    async initChart1() {
      this.charts.chart1 = this.$echarts.init(document.getElementById('chart1'));
      this.charts.chart1.showLoading({
        text: '加载中',
        textColor: '#fff',
        maskColor: 'rgba(0,0,0,0)'
      })
      let data=await getHighEducationBar();
      //最大值
      let maxValue = Math.max.apply(null, getArrByKey(data));
      //用于背景半透明柱子渲染
      let bgArr = data.map(() => {
        return maxValue + maxValue * 0.2;
      });
      let stackValue = (maxValue + maxValue * 0.2) * 0.06;//偏移量
      let option = {
        title: {
          text: '最高学历',
          left: 'center',
          top: 15,
          textStyle: {
            color: '#fff',
            fontSize: 17,
            fontWeight: 'bold'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: (e) => {
            if (e.seriesIndex == 3) {
              return `<p class="tool-title"><span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${e.color.colorStops[1].color};"></span>${e.name} <span style="font-size: 16px;color:${e.color.colorStops[1].color}">${e.value + stackValue}</span>万人</p>`
            }
          }
        },
        grid: {
          left: '5%',
          right: '5%',
          bottom: '5%',
          top: '20%',
          containLabel: true
        },
        xAxis: {
          axisLine: {show: true, lineStyle: {color: 'rgba(255,255,255,0.1)'}},
          axisLabel: {show: true, textStyle: {color: '#fff', fontSize: 14}},
          axisTick: {show: false},
          splitLine: {show: false, lineStyle: {color: 'rgba(255,255,255,0.1)'}},
          data: getArrByKey(data, 'name'),
        },
        yAxis: {
          name: '单位：万人',
          nameTextStyle: {
            color: '#fff',
            fontSize: 14,
          },
          axisLine: {show: false, lineStyle: {color: 'rgba(255,255,255,0.1)'}},
          axisLabel: {show: true, textStyle: {color: '#fff',}},
          axisTick: {show: false},
          splitLine: {show: true, lineStyle: {color: 'rgba(255,255,255,0.1)'}},
        },
        series: [
          //背景柱身
          {
            type: 'bar',
            barWidth: 20,
            barGap: '-100%',
            itemStyle: {
              normal: {
                color: '#152a37',
              }
            },
            emphasis: {
              disabled: true
            },
            data: bgArr
          },
          //背景顶部
          {
            type: "pictorialBar",
            symbol: 'diamond',
            symbolPosition: "end",
            symbolSize: [20, 10],
            symbolOffset: [0, -5],
            z: 12,
            itemStyle: {
              normal: {
                color: 'rgba(146,150,154,.4)',
              }
            },
            emphasis: {
              disabled: true
            },
            data: bgArr
          },
          //撑起柱身
          {
            type: 'bar',
            stack: 'barBody',
            itemStyle: {
              normal: {
                color: 'rgba(0,0,0,0)',
              },
            },
            emphasis: {
              disabled: true
            },
            data: bgArr.map(() => stackValue)
          },
          //柱身
          {
            type: 'bar',
            barWidth: 20,
            barGap: '-100%',
            stack: 'barBody',
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1,
                    [{
                      offset: 0,
                      color: "#2086db"
                    },
                      {
                        offset: 1,
                        color: "#39e8f9"
                      }
                    ],
                    false
                )
              }
            },
            data: getSymbolData(data).map((item) => {
              item.value = item.value - stackValue
              return item
            })
          },
          //顶部菱形
          {
            type: "pictorialBar",
            symbol: 'diamond',
            symbolSize: [20, 10],
            symbolOffset: [0, -5],
            symbolPosition: "end",
            itemStyle: {
              normal: {
                color: '#2febf4',
              }
            },
            z: 12,
            data: getArrByKey(data, 'value').map((item) => item)
          },
          //底部菱形
          {
            name: "",
            type: "pictorialBar",
            symbol: 'diamond',
            symbolSize: [20, 10],
            symbolOffset: [0, -5],
            symbolPosition: "start",
            itemStyle: {
              normal: {
                color: '#2febf4',
              }
            },
            z: 12,
            data: bgArr.map(() => stackValue)
          },
        ]
      }
      this.charts.chart1.hideLoading();
      this.charts.chart1.setOption(option)
    },
    initChart2() {
      this.charts.chart2 = this.$echarts.init(document.getElementById('chart2'));
      this.charts.chart2.showLoading({
        text: '加载中',
        textColor: '#fff',
        maskColor: 'rgba(0,0,0,0)'
      })
      let option={
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '15%',
          left: 'center',
          textStyle:{
            color:'#fff',
          },
          itemGap:10,
        },
        color:['#3579f4','#f8684e'],
        title: {
          text: '性别占比',
          left: 'center',
          top: 15,
          textStyle: {
            color: '#fff',
            fontSize: 17,
            fontWeight: 'bold'
          }
        },
        grid: {
          left: '5%',
          right: '5%',
          bottom: '5%',
          top: '20%',
          containLabel: true
        },
        series: [
          {
            type: 'pie',
            center:['50%','60%'],
            radius: ['50%', '65%'],
            itemStyle: {
              borderRadius: 5,
              borderColor: 'rgba(0,0,0,0)',
              borderWidth: 2
            },
            label:{
              show:true,
              formatter:'{b}：{c}人\n{d}%',
              color:'#fff',
              fontSize:16,
              fontWeight:700,
            },
            labelLine: {
              show: true,
            },
            data: [
              { value: 1048, name: '男' },
              { value: 735, name: '女' },
            ]
          }
        ]
      }
      getGenderPie().then(data=>{
        option.series[0].data=data;
        this.charts.chart2.hideLoading();
        this.charts.chart2.setOption(option)
      })
    },
    initChart3() {
      this.charts.chart3 = this.$echarts.init(document.getElementById('chart3'))
      getIndicatorsNumberPie().then(data=>{
        this.pieData=data;
        this.setLabel();
        // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
        let option = getPie3D(this.pieData, 0.8, 200, 50, 10, 0.6)
        this.charts.chart3.setOption(option)
        option.title = {
          text: '人才队伍',
          left: 'center',
          top: 15,
          textStyle: {
            color: '#fff',
            fontSize: 17,
            fontWeight: 'bold'
          }
        }
        this.charts.chart3.setOption(option)
      })
    },
    setLabel() {
      const color = ['#eee15e', '#15c28a', '#143385', '#1169d3', '#21aaca']
      this.pieData.forEach((item, index) => {
        item.itemStyle = {
          color: color[index]
        }
        item.label = {
          normal: {
            show: true,
            color: color[index],
            formatter: [
              '{d|{d}%} {c|{c}人}',
              '{b|{b}}'
            ].join('\n'), // 用\n来换行
            rich: {
              d: {
                color: color[index],
                fontSize: 22
              },
              c: {
                color: '#fff',
                fontSize: 16
              },
              b: {
                color: '#999',
                fontSize: 16,
                align: 'left'
              }
            }
          }
        }
        item.labelLine = {
          normal: {
            lineStyle: {
              width: 1,
              color: 'rgba(255,255,255,0.7)'
            }
          }
        }
      })
    },
    initChart4() {
      this.charts.chart4 = this.$echarts.init(document.getElementById('chart4'))
      getPoliticsPie().then(data=>{
        this.pieData2=data;
        this.setLabel2();
        // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
        let option = getPie3D2(this.pieData2, 0.8, 200, 20, 20, 0.4)
        this.charts.chart4.setOption(option)
        option.series.push({
          backgroundColor: 'transparent',
          type: 'pie',
          label: {
            opacity: 1,
            fontSize: 13,
            lineHeight: 20
          },
          startAngle: -40, // 起始角度，支持范围[0, 360]。
          clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
          radius: ['20%', '50%'],
          center: ['50%', '50%'],
          data: this.pieData2,
          itemStyle: {
            opacity: 0  //这里必须是0，不然2d的图会覆盖在表面
          }
        })
        option.title = {
          text: '政治面貌占比',
          left: 'center',
          top: 15,
          textStyle: {
            color: '#fff',
            fontSize: 17,
            fontWeight: 'bold'
          }
        }
        this.charts.chart4.setOption(option)
      })
    },
    setLabel2() {
      const color = ['#2b85f3', '#f0982a', '#38bbc3']
      this.pieData2.forEach((item, index) => {
        item.itemStyle = {
          color: color[index]
        }
        item.label = {
          normal: {
            show: true,
            color: color[index],
            formatter: [
              '{d|{d}%} {c|{c}人}',
              '{b|{b}}'
            ].join('\n'), // 用\n来换行
            rich: {
              d: {
                color: color[index],
                fontSize: 22
              },
              c: {
                color: '#fff',
                fontSize: 16
              },
              b: {
                color: '#999',
                fontSize: 16,
                align: 'left'
              }
            }
          }
        }
        item.labelLine = {
          normal: {
            lineStyle: {
              width: 1,
              color: 'rgba(255,255,255,0.7)'
            }
          }
        }
      })
    },
    async initChart5() {
      this.charts.chart5 = this.$echarts.init(document.getElementById('chart5'));
      this.charts.chart5.showLoading({
        text: '加载中',
        textColor: '#fff',
        maskColor: 'rgba(0,0,0,0)'
      })
      let data = await getUnitNatureBar();
      let maxValue = Math.max.apply(null, getArrByKey(data));
      let bgArr = data.map(() => {
        return maxValue + maxValue * 0.2;
      });
      let stackValue = (maxValue + maxValue * 0.2) * 0.06;//偏移量
      let option = {
        title: {
          text: '单位性质',
          left: 'center',
          top: 15,
          textStyle: {
            color: '#fff',
            fontSize: 17,
            fontWeight: 'bold'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: (e) => {
            if (e.seriesIndex == 3) {
              return `<p class="tool-title"><span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${e.color.colorStops[1].color};"></span>${e.name} <span style="font-size: 16px;color:${e.color.colorStops[1].color}">${e.value + stackValue}</span>万人</p>`
            }
          }
        },
        grid: {
          left: '5%',
          right: '5%',
          bottom: '5%',
          top: '20%',
          containLabel: true
        },
        xAxis: {
          axisLine: {show: true, lineStyle: {color: 'rgba(255,255,255,0.1)'}},
          axisLabel: {
            show: true, textStyle: {color: '#fff', fontSize: 12}, formatter: (e) => {
              return e.length >= 4 ? e.slice(0, (e.length / 2)) + '\n' + e.slice(e.length / 2) : e;
            }
          },
          axisTick: {show: false},
          splitLine: {show: false, lineStyle: {color: 'rgba(255,255,255,0.1)'}},
          data: getArrByKey(data, 'name'),
        },
        yAxis: {
          name: '单位：万人',
          nameTextStyle: {
            color: '#fff',
            fontSize: 14,
          },
          axisLine: {show: false, lineStyle: {color: 'rgba(255,255,255,0.1)'}},
          axisLabel: {show: true, textStyle: {color: '#fff',}},
          axisTick: {show: false},
          splitLine: {show: true, lineStyle: {color: 'rgba(255,255,255,0.1)'}},
        },
        series: [
          //背景柱身
          {
            type: 'bar',
            barWidth: 20,
            barGap: '-100%',
            itemStyle: {
              normal: {
                color: 'rgba(73,73,25,0.5)',
              }
            },
            emphasis: {
              disabled: true
            },
            data: bgArr
          },
          //背景顶部
          {
            type: "pictorialBar",
            symbol: 'diamond',
            symbolPosition: "end",
            symbolSize: [20, 10],
            symbolOffset: [0, -5],
            z: 12,
            itemStyle: {
              normal: {
                color: '#6c6c34',
              }
            },
            emphasis: {
              disabled: true
            },
            data: bgArr
          },
          //撑起柱身
          {
            type: 'bar',
            stack: 'barBody',
            itemStyle: {
              normal: {
                color: 'rgba(0,0,0,0)',
              },
            },
            emphasis: {
              disabled: true
            },
            data: bgArr.map(() => stackValue)
          },
          //柱身
          {
            type: 'bar',
            barWidth: 20,
            barGap: '-100%',
            stack: 'barBody',
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1,
                    [{
                      offset: 0,
                      color: "#bc4405"
                    },
                      {
                        offset: 1,
                        color: "#c6aa2c"
                      }
                    ],
                    false
                )
              }
            },
            data: getSymbolData(data).map((item) => {
              item.value = item.value - stackValue
              return item
            })
          },
          //顶部菱形
          {
            type: "pictorialBar",
            symbol: 'diamond',
            symbolSize: [20, 10],
            symbolOffset: [0, -5],
            symbolPosition: "end",
            itemStyle: {
              normal: {
                color: '#cb9b39',
              }
            },
            z: 12,
            data: getArrByKey(data, 'value').map((item) => item)
          },
          //底部菱形
          {
            name: "",
            type: "pictorialBar",
            symbol: 'diamond',
            symbolSize: [20, 10],
            symbolOffset: [0, -4],
            symbolPosition: "start",
            itemStyle: {
              normal: {
                color: '#cb9b39',
              }
            },
            z: 12,
            data: bgArr.map(() => stackValue)
          },
        ]
      }
      this.charts.chart5.hideLoading();
      this.charts.chart5.setOption(option)
    },
    async initChart6() {
      this.charts.chart6 = this.$echarts.init(document.getElementById('chart6'));
      this.charts.chart6.showLoading({
        text: '加载中',
        textColor: '#fff',
        maskColor: 'rgba(0,0,0,0)'
      })
      let data = await getTitlesLevelBar();
      let maxValue = Math.max.apply(null, getArrByKey(data));
      let bgArr = data.map(() => {
        return maxValue + maxValue * 0.2
      });
      let stackValue = (maxValue + maxValue * 0.2) * 0.01;
      let option = {
        title: {
          text: '职称等级',
          left: 'center',
          top: 15,
          textStyle: {
            color: '#fff',
            fontSize: 17,
            fontWeight: 'bold'
          }
        },
        tooltip: {
          trigger: 'item',
        },
        grid: {
          left: '5%',
          right: '5%',
          bottom: '5%',
          top: '20%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          axisLine: {show: false, lineStyle: {color: 'rgba(255,255,255,0.1)'}},
          axisLabel: {show: true, textStyle: {color: '#fff',}},
          axisTick: {show: false},
          splitLine: {show: true, lineStyle: {color: 'rgba(255,255,255,0.1)'}},
        },
        yAxis: {
          type: 'category',
          axisLine: {show: true, lineStyle: {color: 'rgba(255,255,255,0.1)'}},
          axisLabel: {show: true, textStyle: {color: '#fff', fontSize: 14}},
          axisTick: {show: false},
          splitLine: {show: false, lineStyle: {color: 'rgba(255,255,255,0.1)'}},
          data: getArrByKey(data, 'name'),
        },
        series: [
          {
            type: 'bar',
            barGap: '-119%',
            stack: 'assist',
            itemStyle: {
              normal: {
                color: 'rgba(0,0,0,0)',
              },
            },
            emphasis: {
              disabled: true
            },
            data: bgArr.map(() => stackValue)
          }, {
            name: '人数',
            data: data,
            type: 'bar',
            stack: 'assist',
            barWidth: 16,
            z: 12,
            itemStyle: {
              normal: {
                barBorderRadius: [15, 15, 15, 15],
                color: new this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                  offset: 0,
                  color: '#f9f77c'
                }, {
                  offset: 1,
                  color: '#2de4a2'
                }])
              }
            },
          }, {
            type: 'bar',
            barWidth: 22,
            barGap: '-119%',
            itemStyle: {
              normal: {
                borderWidth: 1,
                borderRadius: [15, 15, 15, 15],
                borderColor: '#3be6b2',
                color: 'rgba(0,0,0,0)',
              },
            },
            emphasis: {
              disabled: true
            },
            data: bgArr
          },
        ]
      }
      this.charts.chart6.hideLoading();
      this.charts.chart6.setOption(option)
    },
  },
  beforeDestroy() {
    this.$bus.$off('resize')
  },
  mounted() {
    this.initChart1();
    this.initChart2();
    this.initChart3();
    this.initChart4();
    this.initChart5();
    this.initChart6();
    this.totalCount();
    this.getIndicators();
    this.$bus.$on('resize', () => {
      Object.keys(this.charts).forEach((key) => {
        this.charts[key] && this.charts[key].resize()
      })
    })
  }
}
</script>

<style scoped lang="scss">
.statistical-1 {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;

  .col {
    height: 100%;
    width: calc(25% - 10px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .row {
      width: 100%;
      height: calc((100% - 40px) / 3);
      border-radius: 10px;
      background: rgba(0, 0, 0, 0.2);
      backdrop-filter: blur(12px);

      .chart {
        width: 100%;
        height: 100%;
      }
    }
  }

  .col.full {
    width: calc(50% - 20px);

    .row {
      height: calc((100% - 40px) / 3);
    }

    .row.map {
      height: 100px;
      margin-bottom:calc((100% - 10px) / 3 * 2 - 125px);
      background: none;
      backdrop-filter: none;

      .number-block {
        width: 100%;
        display: flex;
        flex-direction: row;
        height: 100px;

        .number-item {
          width: calc((100% - 75px) / 4);
          margin-right: 25px;
        }

        .number-item:last-child {
          margin-right: 0;
        }
      }
    }
  }
}
</style>
